<!-- 数据科学与大数据一班  F21600108李明阳  2024/1/4 -->
<!DOCTYPE html>
<html>
	<head >
		<meta charset="utf-8">
		<title></title>
		<link href="css/resetlmy.css" rel="stylesheet"/>
		<link href="css/commonlmy.css" rel="stylesheet"/>
	</head>
	<body data-aspm-b="7661907" data-spm="7661907" data-noaplus="">
		<div id="J_warningBar"></div>
		
		<!-- 开始(核心) -->
		<!-- data-spm-anchor-id没写 -->
		<div id="root" class="root-wrap" data-spm="index-order-pay">
			<!-- 整体页面 -->
			<div id="order-pay-content-wrapper">
				<!-- 1 -->
				<div class="header">
					<div class="ticket-info">
						<div class="count-down">
							<span data-role="countdown"></span>
						</div>
						<div class="top-container">
							<!-- 照片 -->
							<div class="movie-poster-c"></div>
							<div class="buy-info">
								<div class="info-title">
									<div class="movie-name">潜行</div>
									<!-- <div class="count-price">共1张原价¥40.9元</div> -->
									<div class="count-price">共1张 原价 ¥ 40.9</div>
								</div>
								<div class="brief">今天 12-29 18:40~20:34（国语 2D）</div>
								<div class="brief">6号厅 5排6座</div>
								<div class="brief cinema-name">幸福蓝海影城（宝山北城时代广场店）</div>
								<div class="brief cinema-address">宝山区上海市宝山区月辉路108弄11号北城时代广场3楼</div>
							</div>
						</div>
						<!-- 划线 -->
						<div class="m-line">
							<div class="lc"></div>
							<div class="ml"></div>
							<div class="rc"></div>
						</div>
						<div class="bottom-container">
							<div class="refund-endorse-box J-refund-endorse-detail">
								<div class="tip disabled">
								  <div class="tip-disable-tag"></div>
								  <div class="tip-text">不支持退票</div>
								</div>
								<div class="tip disabled">
								  <div class="tip-disable-tag"></div>
								  <div class="tip-text">不支持改签</div>
								</div>
								<div class="refund-endorse-notice">退改签须知</div>
								<div class="s-arrow dy-list-arrow">
								  <svg class="bui-svg-icon" focusable="false" viewBox="0 0 96 96">
								    <path d="M76.6 48 43 17.2c-1.2-1.1-1.3-3-.2-4.2s3-1.3 4.2-.2l36 33c1.3 1.2 1.3 3.2 0 4.4l-36 33c-1.2 1.1-3.1 1-4.2-.2s-1-3.1.2-4.2L76.6 48z"></path>
								  </svg>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 2优惠 -->
				<div class="block-div marketing-title-block marketing-wraper">
				  <div class="block-title">
				    <div class="desc ft-bold">本单可享优惠</div></div>
				  <div class="bui-list bui-list-medium">
				    <div class="bar-container ">
				      <div class="bui-list-item list-item coupon-activity-log bui-list-item-divider" data-spm="dcoupon" data-log="spmad=a1z2r.7661907.marketingarea.dcoupon|platform=8" data-aplus-clk="x1_2e23e1c7" data-spm-anchor-id="a1z2r.7661907.index-order-pay.dcoupon.544c6bdbqbvdw9" data-aplus-ae="x1_3fa64813">
				        <div class="bui-list-item-content bar-content">
				          <div class="bar-title">优惠券&amp;活动</div></div>
				        <div class="bui-list-item-extra">
				          <div class="single-line">
				            <div class="weak-guide">未使用</div></div>
				        </div>
				        <div class="bui-list-item-footer">
				          <svg class="bui-svg-icon icon-size-small" focusable="false" viewBox="0 0 96 96">
				            <path d="M55.1 48 32.3 26.9c-1.6-1.5-1.7-4-.2-5.7 1.5-1.6 4-1.7 5.7-.2l26 24c1.7 1.6 1.7 4.3 0 5.9l-26 24c-1.6 1.5-4.2 1.4-5.7-.2-1.5-1.6-1.4-4.2.2-5.7l22.8-21z"></path>
				          </svg>
				        </div>
				      </div>
				    </div>
				  </div>
				</div>
				<!-- 3手机号 -->
				<div class="block-div"></div>
				<!-- 3-4手机号下的空白 -->
				<div id="memeber-card-alipay"></div>
				<!-- 5 -->
				<div class="block-div user-phone-container" data-log="platform=8" data-aplus-clk="x1_35e6ecea" data-spm-anchor-id="a1z2r.7661907.index-order-pay.i0.7e9d6bdbBIkScB">
				  <div class="bui-list bui-list-medium">
				    <div class="bui-list-item bui-list-item-divider">
				      <div class="bui-list-item-content">
				        <div class="icon-phone"></div>
				        <div class="phone-content">
				          <div class="phone-title">18740017917</div>
				          <div class="phone-brief">
				            <span class="b-gray">手机号仅用于生成订单</span></div>
				        </div>
				      </div>
				      <div class="bui-list-item-footer">
				        <svg class="bui-svg-icon icon-size-small" focusable="false" viewBox="0 0 96 96">
				          <path d="M55.1 48 32.3 26.9c-1.6-1.5-1.7-4-.2-5.7 1.5-1.6 4-1.7 5.7-.2l26 24c1.7 1.6 1.7 4.3 0 5.9l-26 24c-1.6 1.5-4.2 1.4-5.7-.2-1.5-1.6-1.4-4.2.2-5.7l22.8-21z"></path>
				        </svg>
				      </div>
				    </div>
				  </div>
				</div>
				<!-- 6 -->
				<div class="block-div">
				  <div class="rule-info">
				    <div class="title">购票须知</div>
				    <div class="desc">1.请确认场次和时间无误，购买成功后将不予退换<br />2.由于设备故障等不可抗力因素，存在少量场次取消的情况，会进行退票退款 <br />3.由于影院系统不稳定等因素，存在出票失败的情况，会进行退款 <br />4.取票码可以在“我的-电影票”中查看</div>
				  </div>
				</div>
				<!-- 7 -->
				<div class="block_div">
				  <div class="footer-bar" id="footer-bar">
				    <div class="bui-safe-area pay-bar">
				      <div class="bill-bar">
				        <div class="price-info">
				          <span class="amount">
				            <span class="pay-desc"></span>
				            <span class="money">¥</span>40.9
				            <span class="pay-desc"></span>
						  </span>
				          <div class="tip">
				            <div class="desc"></div>
				          </div>
				        </div>
				        <div class="pay-detail">
				          <div class="action">明细
				            <div class="up-arrow"></div>
						  </div>
				        </div>
				        <div class="pay-btn red">
				          <div class="main">
				            <div class="chaolianjie" ><a href="./10.html" >立即付款</a></div>
						  </div>
				        </div>
				      </div>
				    </div>
				  </div>
				</div>
				<div id="refund-endorse"></div>
				<div id="certification-pop"></div>
				<div id="endorse-refund-risk"></div>
			</div>
		</div>
		
		
		<div class="wufu-packet-container"></div>
		<div id="ReactRoot"></div>
		<div id="ReactBogo"></div>
		<div class="alert-dialog-mask ob-dialog-mask show show"></div>
		
		
		
		
		<!-- 弹窗跳页 -->
		<div class="alert-dialog ob-dialog show show">
		  <div class="ob-dialog-wrap " role="document">
		    <div class="ob-dialog-header">
		      <h3></h3>
		    </div>
		    <div class="ob-dialog-body">
		      <p class="ob-dialog-brief">付款超时，请返回选座页重新购买</p>
			</div>
		    <div class="ob-dialog-footer alert-dialog-footer">
		      <button type="button" class="ob-dialog-button"><a href="./8.html" >我知道了</button></div>
		  </div>
		</div>
		
		<!-- 弹窗二 -->
		<!-- 3 -->
		<div class="pay-info">
		  <div class="sheet-title">
		    <div class="title">结算明细</div>
		    <div class="close">
				<a href="./10.html" target="_blank">
					<svg class="bui-svg-icon icon-size-medium" focusable="false" viewBox="0 0 96 96" color="#ccc" style="color: rgb(204, 204, 204);">
					  <path d="M48 8c22.1 0 40 17.9 40 40S70.1 88 48 88 8 70.1 8 48 25.9 8 48 8zm-8.1 27.8c-1.1-1.1-2.9-1.1-4.1 0s-1.1 2.9 0 4.1l8.1 8.1-8.1 8.1c-1.1 1.1-1.1 2.9 0 4.1s2.9 1.1 4.1 0l8.1-8.1 8.1 8.1c1.1 1.1 2.9 1.1 4.1 0s1.1-2.9 0-4.1L52.1 48l8.1-8.1c1.1-1.1 1.1-2.9 0-4.1s-2.9-1.1-4.1 0L48 43.9l-8.1-8.1z">
						</path>
					</svg> 
		    </div>
		  </div>
		  <div class="recommend-bar" data-best="false">实际价格以结算明细为准</div>
		  <div class="dy-list-body bill">
		    <div class="dy-list-item-line">
		      <div class="dy-list-title-line">
		        <strong>电影票</strong>
		        <div class="dy-list-brief-line">
		          <div class="dy-list-label price-label">
		            <span>原价</span>
		            <span>&nbsp;</span>(含服务费4.9元/张)
		            <span class="price-icon"></span></div>
		          <div class="dy-list-content"></div>
		          <div class="dy-list-value">¥40.9</div></div>
		      </div>
		    </div>
		  </div>
		</div>
	</body>
	<!-- 倒计时 -->
	<script type="text/javascript">
		// 弹窗
		var alertDialog = document.querySelector('.alert-dialog');
		// 隐藏弹窗页面
		alertDialog.style.display = 'none';
		
		// 获取显示倒计时的元素
	    var countdownElement = document.querySelector('[data-role="countdown"]');
	    // 设置初始时间为15分钟
	    // var remainingTime = 900;
		var remainingTime = 91;
		// 每隔1秒更新剩余时间并更新倒计时显示
	    var countdownInterval = setInterval(function() {
	    // 更新剩余时间
	    remainingTime--;
		// 计算分和秒
	    var minutes = Math.floor(remainingTime / 60);
	    var seconds = remainingTime % 60;
		// 格式化为字符串，并更新倒计时显示
	     countdownElement.innerHTML =  (minutes < 10 ? '0' : '') + minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
		// 如果剩余时间为0，清除计时器
	    if (remainingTime == 0) {
		// 显示弹窗页面
		alertDialog.style.display = 'block';
	    clearInterval(countdownInterval);
	    }
	   }, 1000);
	 </script>
	 
	 <!-- 显示弹窗--实现跳转 -->
	 <script>
	 	var upArrow = document.querySelector('.up-arrow');
	 	        var payInfo = document.querySelector('.pay-info');
	 	
	 	        upArrow.addEventListener('click', function() {
	 	            payInfo.style.display = 'block';
	 	        });
	 </script>
	 
	
	 
</html>